<template>
	<view>
		<view class="alert-wrapper center">
			<view class="alert-inner">
				<view class="title f30 tCenter" v-if="alertTitle!=''">
					{{alertTitle}} 
				</view>
				<view class="f26 c666 text tCenter" v-if="!showInput">
					{{alertText}}
				</view>
				<input type="text" :placeholder="placeholder" maxlength="10" v-if="showInput" v-model="text"/>
				<view class="btn-box f30 c666 center">
					<view class="btn flex center" @tap="alertConfirm(0)" v-if="showCancel">
						取消
					</view>
					<view class="btn cyellow flex center" @tap="alertConfirm(1)">
						{{confirmText}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				flag:true
			}
		},
		props:{
			alertText:{
				type: String,
				default: '为了保障您的资金安全，请先进行实名认证，在设置支付密码'
			},
			confirmText:{
				type: String,
				default: '确定'
			},
			showImg:{
				type: [Boolean,String],
				default: true
			},
			alertTitle:{
				type: String,
				default: ''
			},
			showCancel:{
				type: [Boolean,String],
				default: true
			},
			showInput:{
				type: [Boolean,String],
				default: false
			},
			placeholder:{
				type:String,
				default: '请输入'
			},
		},
		data() {
			return {
				text:''
			};
		},
		methods:{
			alertConfirm(type){
				this.flag = false
				console.log(this.text)
				this.$emit('alertConfirm',type,this.text)
			}
		}
	}
</script>

<style lang="scss">
.alert-inner{
	width:675rpx;
	background:rgba(255,255,255,1);
	border-radius:12rpx;
	input{
		width:630rpx;
		height:85rpx;
		background:rgba(242,243,245,1);
		border-radius:8rpx;
		margin: 10rpx auto 37rpx;
		padding-left: 20rpx;
	}
	.cyellow{
		border-left: 1rpx solid #EFEFEF;
		color: #0297FE;
	}
	.btn-box{
		border-top: 1rpx solid #EFEFEF;
		margin-top: 32rpx;
		.btn{
			height: 87rpx;
		}
	}
	.title{
		padding: 37rpx;
		font-weight: bold;
	}
	.text{
		padding: 35rpx 30rpx 0;
		line-height: 35rpx;
	}
	.alert_img{
		width: 95rpx;
		height: 95rpx;
		margin: 30rpx 253rpx 0 ;
		display: blue($color: #000000);
	}
}
</style>
